<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
		/>
		<meta
			name="description"
			content="A free, peer-to-peer, encrypted, open-source video calling for the web. No sign ups. No downloads."
		/>
		<meta
			name="keywords"
			content="group video chat, video communication, multiparty video chat, video chat, webrtc, peer to peer, p2p"
		/>
		<meta name="application-name" content="Talk" />
		<!-- Meta data for link fetching -->
		<meta property="og:url" content="https://tlk.li" />
		<meta property="og:image" content="https://tlk.li/og-image.png" />
		<meta property="og:title" content="Talk - Free group video call for the web" />
		<meta
			property="og:description"
			content="A free, peer-to-peer, encrypted, open-source video calling for the web. No sign ups. No downloads."
		/>

		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
		<link rel="icon" href="/favicon.svg" />
		<link rel="stylesheet" href="/home.css" />
		<title>Talk - Free group video call for the web</title>
		<script defer src="/vue.global.prod.js"></script>
		<script defer src="/home.js"></script>

		<!-- ANALYTICS_SCRIPT -->
	</head>

	<body>
		<main class="wrap">
			<div id="app" class="row">
				<h1 class="flex"><img src="favicon.svg" id="logo" /> Talk</h1>
				<h2>A free, peer-to-peer, open-source video calling for the web.</h2>
				<h3>No sign ups. No downloads.<br />Works in all major browsers.</h3>
				<div class="flex">
					<div id="roomurl">
						<span>tlk.li/</span
						><input
							type="text"
							placeholder="room-name"
							pattern="[a-zA-Z0-9]{8}"
							v-model="roomId"
							v-on:keydown.enter="goToRoom"
						/>
					</div>
					<a v-bind:href="'/'+roomId" class="button">Start</a>
				</div>

				<p><a href="javascript:void(0)" v-on:click="generateRandomRoomId">Generate a random room</a></p>
			</div>
			<div class="spacer"></div>
			<div class="row">
				<iframe
					src="https://ghbtns.com/github-btn.html?user=vasanthv&repo=talk&type=star&count=true&size=large"
					frameborder="0"
					scrolling="0"
					width="170"
					height="30"
					title="GitHub"
				></iframe>
			</div>

			<div class="row small light">
				&copy; tlk.li &middot; <a href="/legal">Legal</a> &middot;
				<a href="mailto:vasanth@tlk.li" target="_blank">Contact</a>
			</div>

			<br /><br />
		</main>
	</body>
</html>
